import React from 'react'
import { useNavigate } from 'react-router-dom'
import classNames from 'classnames'
import Icon from '../../components/Icon/index'
import styles from './index.module.scss'

function NavBar({ children, extra, className }) {
  const navigate = useNavigate()
  const back = () => {
    navigate(-1)
  }
  return (
    <div className={classNames(styles.root, className)}>
      {/* 后退按钮 */}
      <div className='left'>
        <Icon type='icon-fanhui' onClick={back} />
      </div>
      {/* 居中标题 */}
      <div className='title'>{children}</div>

      {/* 右侧内容 */}
      <div className='right'>{extra}</div>
    </div>
  )
}
export default NavBar
